<template>
  <div class="box-container">
    <search-box @search="onSearch" />
    <orders-table
      :orders-list="ordersList"
      @on-edit="onEdit"
      @on-local="onLocal"
    />
    <pagination
      :page-data="ordersForm"
      :total="total"
      :page-sizes="pageSizes"
      @page-change="loadOrdersList"
    />

    <!-- 修改订单地址弹出层 -->
    <el-dialog
      title="修改地址"
      :visible.sync="isShowEditDialog"
      width="50%"
      @close="onEditDialogClose"
    >
      <!-- 绑定的form表单数据 -->
      <el-form ref="addressForm" :rules="addressFormRules" :model="addressForm" label-width="90px">
        <el-form-item label="省市区/县" prop="area">
          <!-- <el-input v-model.trim="addressForm.area" placeholder="请选择" /> -->
          <el-cascader
            v-model="city"
            :options="cityOptions"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model.trim="addressForm.address" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowEditDialog = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 物流信息弹出层 -->
    <el-dialog
      title="物流进度"
      :visible.sync="logisticsDialogVisible"
      width="50%"
    >
      <!-- Timeline 时间线 -->
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in logisticsInfo"
          :key="index"
          :icon="index ? '' : 'el-icon-location'"
          :color="index ? '' : '#0bbd87'"
          :size="index ? 'normal' : 'large'"
          :timestamp="item.time"
        >
          {{ item.context }}
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="logisticsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="logisticsDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cityOptions from '@/utils/city_data2017_element.js'
import { getOrdersList, getLogisticsInfo } from '@/api/orders'
import OrdersTable from './components/OrdersTable.vue'
export default {
  components: { OrdersTable },
  data() {
    return {
      pageSizes: [10, 15, 20, 25],
      total: 0,
      ordersForm: {
        query: '',
        pagenum: 1,
        pagesize: 10,
        user_id: '',
        pay_status: '',
        is_send: '',
        order_fapiao_title: '',
        order_fapiao_company: '',
        order_fapiao_content: '',
        consignee_addr: ''
      },
      ordersList: [],
      isShowEditDialog: false, // 控制修改订单地址弹出层显示
      addressForm: {
        area: '',
        address: ''
      },
      addressFormRules: {
        area: [{ required: true, message: '不能为空！', trigger: 'blur' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
      },
      city: [],
      cityOptions: cityOptions,
      logisticsDialogVisible: false, // 控制物流信息弹出层显示
      logisticsInfo: []
    }
  },

  created() {
    this.loadOrdersList()
  },

  methods: {
    async loadOrdersList() {
      const res = await getOrdersList(this.ordersForm)
      this.total = res.total
      this.ordersList = res.goods
    },
    // 点击了搜索
    onSearch(val) {
      this.ordersForm.query = val
      this.loadOrdersList()
    },
    // 点击了修改订单地址
    onEdit() {
      this.isShowEditDialog = true
    },
    // 修改地址对话框关闭，表单清空
    onEditDialogClose() {
      this.$refs.addressForm.resetFields()
    },
    // 点击查看物流信息
    async onLocal(id) {
      const res = await getLogisticsInfo(id)
      this.logisticsInfo = res
      this.logisticsDialogVisible = true
    }
  }
}
</script>

<style scoped lang='scss'>
.el-cascader{
  width: 100%;
}
</style>
